<template>
  <div class="title flex-x-start">
    <div class="triangle"></div>
    <span class="name">{{ title }}</span>
  </div>
</template>
<script setup lang="ts">
defineProps({
  title: {
    type: String
  }
});
</script>
<style scoped lang="scss">
.title {
  padding: 0 15px;
  font-size: 17px;
  color: #53b9ff;
  .triangle {
    position: relative;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #00e1ff;
    z-index: 1;
    filter: blur(1px);
  }

  .triangle::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #ffffff;
  }

  .name {
    margin-left: 5px;
    font-style: italic;
  }
}
</style>
